<template>
  <div class="tie2">
    <div class="tie">
      <form>
        <input type="hidden" value="products-all" />
        <label for="disp-order-sorter">Sort:by</label>
        <select name="disp-order" id="disp-order-sorter">
          <option value="1" selected="selected">Product-Name</option>
          <option value="2">Product Name - desc</option>
          <option value="3">Price - low to high</option>
          <option value="4">Price - high to low</option>
          <option value="5">Model</option>
          <option value="6">Date Added - New to Old</option>
          <option value="7">Date Added - Old to New</option>
        </select>
      </form>
    </div>
    <span class="d1">Displaying 1 to 3 (of 20 products)</span>
    <div class="xx">
      <a href=""><img style="width: 332px; height: 221px; margin-top: 20px" src="../assets/img/wlf-gs.jpg" alt="" /></a>
      <div class="xx1">
        <h3 style="padding:5px ;">上架日期: 2022-03-25</h3>
        <hr />
        <h3 style="padding:5px ;"><a href="">丝丝香王凉粉</a></h3>
        <hr />
        <h4 style="padding:5px ;"><a href="">天然纯正,自然美味</a></h4>
        <span style="padding:5px ;"><strong>制造商：</strong>王凉粉总店</span><br />
        <span style="padding:5px ;"><strong>产地：</strong>江西内江</span><br />
        <span style="padding:5px ;">价格：</span>
        <span style="color: #008180; font-size: 13px; font-weight: bold">￥8.0</span>&nbsp;<span
          style="text-decoration: line-through">原价.￥10.0</span><br />
        <a href="" style="color: #fe6847; text-decoration: none; font-size: 0.8125em; padding: 5px;">了解详情</a><br />
        <h5 style="margin-left: -350px; margin-top: 25px; color: #333333">
          商品描述:
        </h5>
        <br />
        <p style="
            font-size: 12px;
            color: #6b6b6b;
            margin-left: -350px;
            margin-top: -15px;
          ">
          丝丝香王凉粉自清代传承下来，始终坚持“用心调美味”，花生，红薯，豌豆，糖，姜蒜，辣椒等等选择食材上绝不马虎。不含添加剂和人工色素！天然的纯正，自然美味。
        </p>
      </div>
    </div>
    <div class="xx2">
      <a href=""><img style="width: 332px; height: 221px; margin-top: 20px" src="../assets/img/wusanzimh-nc.jpg"
          alt="" /></a>
      <div class="xx1">
        <h3 style="padding:5px ;">上架日期: 2022-03-25</h3>
        <hr />
        <h3 style="padding:5px ;"><a href="">吴馓子麻花</a></h3>
        <hr />
        <h4 style="padding:5px ;"><a href="">香甜酥脆,入口化渣</a></h4>
        <span style="padding:5px ;"><strong>制造商：</strong>吴馓子麻花老店</span><br />
        <span style="padding:5px ;"><strong>产地：</strong>四川南充蓬安县</span><br />
        <span style="padding:5px ;">价格：</span>
        <span style="color: #008180; font-size: 13px; font-weight: bold">￥18.0</span>&nbsp;<span
          style="text-decoration: line-through">原价.￥20.0</span><br />
        <a href="" style="color: #fe6847; text-decoration: none; font-size: 0.8125em;padding:5px;">了解详情</a><br />
        <h5 style="margin-left: -350px; margin-top: 20px; color: #333333">
          商品描述:
        </h5>
        <br />
        <p style="
            font-size: 12px;
            color: #6b6b6b;
            margin-left: -350px;
            margin-top: -20px;
          ">
          吴馓子麻花是吴氏祖传名特小吃，秘方考究、做工精致，采用水糖、黑芝麻、核桃、花生、黄豆、香料等，以嘉陵第一桑梓“神龙泉”水揉合，生坯三寸六，成品三寸一，色泽红润、香甜酥脆、入口化渣、回味无穷。沿江两岸，口口相传，嘉陵江畔，美食一绝。
        </p>
      </div>
    </div>
    <div class="xx3">
      <a href=""><img style="width: 332px; height: 221px; margin-top: 20px" src="../assets/img/cblf1.png" alt="" /></a>
      <div class="xx1">
        <h3 style="padding:5px ;">上架日期: 2022-03-25</h3>
        <hr />
        <h3 style="padding:5px ;"><a href="">川北凉粉</a></h3>
        <hr />
        <h4 style="padding:5px ;"><a href="">红辣味醇,鲜香爽口</a></h4>
        <span style="padding:5px ;"><strong>制造商：</strong>川北凉粉总店</span><br />
        <span style="padding:5px ;"><strong>产地：</strong>四川南充</span><br />
        <span style="padding:5px ;">价格：</span>
        <span style="color: #008180; font-size: 13px; font-weight: bold">￥9.0</span>&nbsp;<span
          style="text-decoration: line-through">原价.￥10.0</span><br />
        <a href="" style="color: #fe6847; text-decoration: none; font-size: 0.8125em;padding:5px;">了解详情</a><br />
        <h5 style="margin-left: -350px; margin-top: 15px; color: #333333">
          商品描述:
        </h5>
        <br />
        <p style="
            font-size: 12px;
            color: #6b6b6b;
            margin-left: -350px;
            margin-top: -25px;
          ">
          川北凉粉始自清末，原为南充县江村坝农民谢天禄经营的谢凉粉，后经农民陈洪顺悉心研究谢凉粉制作工艺，取其所长并加以改进，陈凉粉便名扬川北一带，“川北凉粉”也不胫而走，并得以独具的红辣味醇、鲜香爽口风味流传至今。2007年，川北凉粉的制作技艺入选四川省首批非物质文化遗产名录。
        </p>
      </div>
    </div>
    <div class="dd">
      <a href=""><strong class="d1">1</strong></a>
      &nbsp;&nbsp;
      <a href="" class="d2">2</a>
      &nbsp;&nbsp;
      <a href="" class="d3">下一页>></a>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.d1 {
  font-size: 16px;
  color: #6b6b6b;
}

.tie2 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 20px;
  height: 1100px;
}

.tie {
  display: block;
  padding: 15px 20px;
  background: #fe6847;
  margin-bottom: 20px;
}

.xx1 {
  width: 642px;
  height: 211px;
  float: right;
  margin-right: 145px;
  margin-top: 20px;
  line-height: 150%;
}

.xx3 {
  width: 1140px;
  height: 309px;
  line-height: 150%;
}

.xx2 {
  width: 1140px;
  height: 309px;
  line-height: 150%;
}

.xx {
  width: 1140px;
  height: 309px;
  position: relative;
}

.xx1>h3 a {
  font-size: 13.6px;
  color: #6b6b6b;
  text-decoration: none;

}

.xx1>h4 a {
  font-size: 13.6px;
  color: #6b6b6b;
  text-decoration: none;
}

.xx1>h3 {
  color: #6b6b6b;
  font-size: 13.6px;
}

.xx1>span {
  font-size: 13.6px;
  color: #6b6b6b;
}

.dd {
  margin-top: 25px;
  margin-right: 290px;
  float: right;
}

.dd .d1 {
  background-color: #fe6847;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
}

.dd .d2 {
  background-color: #c2be67;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
}

.dd .d3 {
  background-color: #c2be67;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
}
</style>
